<template>
  <div id="shareStrategy">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-form-item label="" prop="classList" class="margin10">
          <el-radio-group v-model="ruleForm.isAll">
            <el-radio
              v-for="item in classList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label=""
          prop="getIntegral"
          class="small"
          label-width="5px"
          v-if="ruleForm.isAll === 'true'"
        >
          分享内容到任意平台可获得
          <el-input-number
            v-model.number="ruleForm.getIntegral"
            size="mini"
            :min="1"
            :max="9999"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number>
          积分
        </el-form-item>
        <el-form-item
          label="每日上限"
          prop="everydayMax"
          class="small"
          v-if="ruleForm.isAll === 'true'"
        >
          <el-input-number
            v-model.number="ruleForm.everydayMax"
            size="mini"
            :min="0"
            :max="9999"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number>
          次
        </el-form-item>
        <el-row :gutter="20" v-if="ruleForm.isAll === 'false'">
          <!--表头-->
          <div class="row-title">
            <el-col :span="10">字段名称</el-col>
            <el-col :span="14">积分规则</el-col>
          </div>
          <!--微信-->
          <el-col :span="10">微信</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="wechat"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.wechat"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--朋友圈-->
          <el-col :span="10">朋友圈</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="wechatMoments"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.wechatMoments"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--QQ-->
          <el-col :span="10">QQ</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="qq"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.qq"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--QQ空间-->
          <el-col :span="10">QQ空间</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="space"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.space"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--微博-->
          <el-col :span="10">微博</el-col>
          <el-col :span="14">
            可获得
            <el-form-item
              label=""
              prop="weibo"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.weibo"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="每日上限"
          prop="dailyLimit"
          v-if="ruleForm.isAll === 'false'"
        >
          <el-radio-group v-model="ruleForm.dailyLimit">
            <el-radio
              v-for="item in dailyLimitList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
          <el-form-item
            label=""
            prop="everydayMaxTemp"
            class="small line margin0"
            v-if="ruleForm.dailyLimit === 'limited'"
          >
            <el-input-number
              v-model.number="ruleForm.everydayMaxTemp"
              size="mini"
              :min="1"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number
            >次
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'shareStrategy',
  msg: '积分策略-分享',
  watch: {
    'ruleForm.everydayMaxTemp': {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          //每日上限(0表示无上限)
          this.ruleForm.dailyLimit = 'unlimited'
        } else {
          this.ruleForm.dailyLimit = 'limited'
        }
      },
      deep: true
    },
    'ruleForm.dailyLimit': {
      handler(newVal, oldVal) {
        if (newVal === 'unlimited') {
          //每日上限(0表示无上限)
          this.ruleForm.everydayMaxTemp = 0
        }
      },
      deep: true
    },
    'ruleForm.isAll': {
      handler(newVal, oldVal) {
        if (newVal === 'true') {
          //不区分平台
          this.ruleForm.wechat = 0
          this.ruleForm.wechatMoments = 0
          this.ruleForm.qq = 0
          this.ruleForm.space = 0
          this.ruleForm.weibo = 0
          this.ruleForm.everydayMaxTemp = 0
        } else {
          this.ruleForm.everydayMax = 0
          this.ruleForm.getIntegral = 0
        }
      },
      deep: true
    }
  },
  data() {
    return {
      dailyLimitList: [
        { dictValue: 'unlimited', dictLabel: '不限' },
        { dictValue: 'limited', dictLabel: '限制' }
      ], // 每日上限
      classList: [], // 每日上限
      ruleForm: {
        dailyLimit: 'unlimited', //每日上限（自定义课程）
        isAll: 'true', //不区分平台、按照平台区分设置
        everydayMax: 1, //每日上限（不区分平台）
        everydayMaxTemp: 1, //每日上限（区分平台）
        getIntegral: 10, // 奖励积分
        wechat: 0, //微信
        wechatMoments: 0, //朋友圈
        qq: 0, //QQ
        space: 0, //QQ空间
        weibo: 0 //微博
      },
      rules: {
        dailyLimit: {
          required: true,
          message: '请选择每日上限',
          trigger: 'bluer'
        },
        everydayMax: {
          required: true,
          message: '每日上限不能为空',
          trigger: 'change',
          type: 'number'
        },
        everydayMaxTemp: {
          required: true,
          message: '每日上限不能为空',
          trigger: 'change',
          type: 'number'
        },
        shareCount: {
          type: 'number'
        },
        wechat: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        wechatMoments: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        qq: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        space: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        weibo: {
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        },
        getIntegral: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      this.classList = await sysNormalDisable('strategy_rules_share')
      this.ruleForm.isAll = this.classList[0].dictValue
    },
    //表单赋值
    setForm(formData) {
      let { isAll, everydayMax, getIntegral, subtaskDTO } = formData
      this.ruleForm.isAll = isAll.toString()
      this.ruleForm.getIntegral = getIntegral
      if (isAll === true) {
        //不区分平台
        this.ruleForm.everydayMax = everydayMax
      } else {
        this.ruleForm.everydayMax = 0
        this.ruleForm.everydayMaxTemp = everydayMax
      }
      if (subtaskDTO && subtaskDTO.length > 0) {
        subtaskDTO.forEach((item) => {
          let [key, value] = [item.toEdit, item.integralNumber]
          this.ruleForm[key] = value
        })
      }
    },
    //表单校验 & 数据提交
    checkForm() {
      let obj = { ...this.ruleForm }
      if (obj.isAll === 'false') {
        obj.everydayMax = obj.everydayMaxTemp
      }
      delete obj.everydayMaxTemp
      delete obj.dailyLimit
      this.$emit('setComRuleForm', obj)
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
#shareStrategy {
  .el-row {
    padding-bottom: 10px;
    .el-col {
      height: 40px;
      line-height: 40px;
      color: #333;
      border-bottom: 1px solid #eee;
    }
    .row-title {
      background: #eee;
      height: 40px;
      margin-bottom: 6px;
    }
  }
  .el-form-item__error {
    position: initial;
    display: inline-block;
  }
  .el-table {
    margin-bottom: 10px;
  }
  .margin10 {
    margin-bottom: 10px !important;
    .el-form-item__content {
      margin-left: 5px !important;
    }
  }
  .line {
    display: inline-block;
    margin-left: 8px;
  }
  .el-form-item.small.line {
    margin-bottom: 0;
  }
}
</style>
